<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改' " :close-on-click-modal='false'
		:close-on-press-escape='false' :fullscreen='true'>
		<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter.native="dataFormSubmitHandle()"
			label-width="120px">

			<el-form-item label="上架策略号" prop="strategykey">
				<el-input size="small" v-model="dataForm.strategykey" placeholder="上架策略号" disabled></el-input>
			</el-form-item>
			<!-- <el-form-item label="明细号" prop="linenum">
            <el-input v-model="dataForm.linenum" placeholder="明细号"></el-input>
          </el-form-item> -->
			<el-form-item label="顺序号" prop="orderline">
				<el-input size="small" v-model.number="dataForm.orderline" placeholder="顺序号"></el-input>
			</el-form-item>
			<el-form-item label="上架策略码" prop="strategycode">
				<!-- <el-input v-model="dataForm.strategycode" placeholder="上架策略码"></el-input> -->
				<el-select size="small" v-model="dataForm.strategycode">
					<el-option v-for="item in putawaycodeList" :key="item.list" :label="item.listname"
						:value="item.list">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="自区" prop="fromzonecode">
				<!-- <el-input v-model="dataForm.fromzonecode" placeholder="自区"></el-input> -->
				<el-select size="small" v-model="dataForm.fromzonecode">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in zoneList" :key="item.zonecode" :label="item.zonename"
						:value="item.zonecode">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="至区" prop="tozonecode">
				<!-- <el-input v-model="dataForm.tozonecode" placeholder="至区"></el-input> -->
				<el-select size="small" v-model="dataForm.tozonecode">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in zoneList" :key="item.zonecode" :label="item.zonename"
						:value="item.zonecode">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="自库位" prop="fromloc">
				<el-input size="small" v-model="dataForm.fromloc" placeholder="自库位"></el-input>
			</el-form-item>
			<el-form-item label="至库位" prop="toloc">
				<el-input size="small" v-model="dataForm.toloc" placeholder="至库位"></el-input>
			</el-form-item>
			<el-form-item label="库位类型" prop="locType">
				<!-- <el-input v-model="dataForm.locType" placeholder="库位类型"></el-input> -->
				<el-select size="small" v-model="dataForm.locType">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in locTypeList" :key="item.list" :label="item.listname" :value="item.list">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="库位类别" prop="locCategory">
				<!-- <el-input v-model="dataForm.locCategory" placeholder="库位类别"></el-input> -->
				<el-select size="small" v-model="dataForm.locCategory">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in locCategoryList" :key="item.list" :label="item.listname"
						:value="item.list">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="库位状态" prop="locStatus">
				<!-- <el-input v-model="dataForm.locStatus" placeholder="库位状态"></el-input> -->
				<el-select size="small" v-model="dataForm.locStatus">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in locStatusList" :key="item.list" :label="item.listname" :value="item.list">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="巷道" prop="lane">
				<el-input size="small" v-model.number="dataForm.lane" placeholder="巷道"></el-input>
			</el-form-item>
			<el-form-item label="巷道侧边" prop="laneSide">
				<el-input size="small" v-model="dataForm.laneSide" placeholder="巷道侧边"></el-input>
			</el-form-item>
			<el-form-item label="巷道侧边的深度" prop="laneDepth">
				<el-input size="small" v-model.number="dataForm.laneDepth" placeholder="巷道侧边的深度"></el-input>
			</el-form-item>

			<el-form-item label="箱类型" prop="traytype">
				<el-radio-group size="small" v-model="dataForm.traytype">
					<el-radio label="S">小箱</el-radio>
					<el-radio label="M">中箱</el-radio>
					<el-radio label="L">大箱</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="物料类别" prop="sortvalue">
				<el-cascader size="small" v-model="dataForm.sortvalue" :options="skucategoryList" placeholder="类别"
					:props="{ value: 'categorykey' ,label:'name', checkStrictly: true  }" :show-all-levels="false"
					@change="handleChange" clearable>
				</el-cascader>
			</el-form-item>
			<el-form-item label="排列顺序" prop="rowcollevorder">
				<!-- <el-input v-model="dataForm.rowcollevorder" placeholder="排列顺序"></el-input> -->
				<el-select size="small" v-model="dataForm.rowcollevorder">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in rowcollevorderList" :key="item.list" :label="item.listname"
						:value="item.list">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="排顺序" prop="roworder">
				<!-- <el-input v-model="dataForm.roworder" placeholder="排顺序"></el-input> -->
				<el-select size="small" v-model="dataForm.roworder">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in biggerorsmallerList" :key="item.list" :label="item.listname"
						:value="item.list">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="列顺序" prop="columnorder">
				<!-- <el-input v-model="dataForm.columnorder" placeholder="列顺序"></el-input> -->
				<el-select size="small" v-model="dataForm.columnorder">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in biggerorsmallerList" :key="item.list" :label="item.listname"
						:value="item.list">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="层顺序" prop="levelorder">
				<!-- <el-input v-model="dataForm.levelorder" placeholder="层顺序"></el-input> -->
				<el-select size="small" v-model="dataForm.levelorder">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in biggerorsmallerList" :key="item.list" :label="item.listname"
						:value="item.list">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="备用字段1" prop="reserve1">
				<el-input size="small" v-model="dataForm.reserve1" placeholder="备用字段1"></el-input>
			</el-form-item>
			<el-form-item label="备用字段2" prop="reserve2">
				<el-input size="small" v-model="dataForm.reserve2" placeholder="备用字段2"></el-input>
			</el-form-item>
			<!-- <el-form-item label="备用字段3" prop="reserve3">
				<el-input v-model="dataForm.reserve3" placeholder="备用字段3"></el-input>
			</el-form-item>
			<el-form-item label="备用字段4" prop="reserve4">
				<el-input v-model="dataForm.reserve4" placeholder="备用字段4"></el-input>
			</el-form-item>
			<el-form-item label="备用字段5" prop="reserve5">
				<el-input v-model="dataForm.reserve5" placeholder="备用字段5"></el-input>
			</el-form-item> -->
			<!-- <el-form-item label="创建人" prop="adduser">
            <el-input v-model="dataForm.adduser" placeholder="创建人"></el-input>
          </el-form-item>
          <el-form-item label="创建时间" prop="addtime">
            <el-input v-model="dataForm.addtime" placeholder="创建时间"></el-input>
          </el-form-item>
          <el-form-item label="更新人" prop="updatuser">
            <el-input v-model="dataForm.updatuser" placeholder="更新人"></el-input>
          </el-form-item>
          <el-form-item label="更新时间" prop="updatetime">
            <el-input v-model="dataForm.updatetime" placeholder="更新时间"></el-input>
          </el-form-item> -->
		</el-form>
		<template #footer>
			<el-button size="small" @click="visible = false">取消</el-button>
			<el-button size="small" type="primary" @click="dataFormSubmitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import {
		getPutawaystrategydetailById,
		putPutawaystrategydetail,
		postPutawaystrategydetail
	} from "@/network/lswms/base/Putawaystrategydetail"
	import {
		getzonelist
	} from "@/network/lswms/base/Zone.js"
	import {
		getCodeListByCode
	} from "@/network/lswms/base/Codelist.js"
	import {
		ElMessage
	} from 'element-plus'

	import {
		getSkucategoryById,
		getSkucategoryByType
	} from "@/network/lswms/base/Skucategory"
	import _ from 'lodash'


	export default {
		name: "putawaystrategydetailAddOrUpdate",
		emits: ["refreshDataList"],
		setup(props, {
			emit
		}) {
			const visible = ref(false);
			const dataForm = ref({
				id: '',
				strategykey: '',
				linenum: '',
				orderline: '',
				strategycode: '',
				fromzonecode: '',
				tozonecode: '',
				fromloc: '',
				toloc: '',
				locType: '',
				locCategory: '',
				locStatus: '',
				lane: '',
				laneSide: '',
				laneDepth: '',
				traytype: '',
				rowcollevorder: '',
				roworder: '',
				columnorder: '',
				levelorder: '',
				traytype: '',
				skusort: '',
				sortvalue:[],
				sortName: '',
				rowcollevorder: '',
				roworder: '',
				columnorder: '',
				levelorder: '',

				reserve1: '',
				reserve2: '',
				reserve3: '',
				reserve4: '',
				reserve5: '',
				adduser: '',
				addtime: '',
				updatuser: '',
				updatetime: ''
			});


			const dataRule = reactive({
				strategykey: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				/* linenum: [
				   { required: true, message: '必填项不能为空', trigger: 'blur' }
				 ],      */
				orderline: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				strategycode: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				/*        fromzonecode: [
				          { required: true, message: '必填项不能为空', trigger: 'blur' }
				        ],          tozonecode: [
				          { required: true, message: '必填项不能为空', trigger: 'blur' }
				        ],          fromloc: [
				          { required: true, message: '必填项不能为空', trigger: 'blur' }
				        ],          toloc: [
				          { required: true, message: '必填项不能为空', trigger: 'blur' }
				        ],          locType: [
				          { required: true, message: '必填项不能为空', trigger: 'blur' }
				        ],          locCategory: [
				          { required: true, message: '必填项不能为空', trigger: 'blur' }
				        ],          locStatus: [
				          { required: true, message: '必填项不能为空', trigger: 'blur' }
				        ],     */
				lane: [{
					type: 'number',
					message: '必须为数字值'
				}],
				/*       laneSide: [
				         { required: true, message: '必填项不能为空', trigger: 'blur' }
				       ],    */
				laneDepth: [{
					type: 'number',
					message: '必须为数字值'
				}],
				/*      reserve1: [
				        { required: true, message: '必填项不能为空', trigger: 'blur' }
				      ],          reserve2: [
				        { required: true, message: '必填项不能为空', trigger: 'blur' }
				      ],          reserve3: [
				        { required: true, message: '必填项不能为空', trigger: 'blur' }
				      ],          reserve4: [
				        { required: true, message: '必填项不能为空', trigger: 'blur' }
				      ],          reserve5: [
				        { required: true, message: '必填项不能为空', trigger: 'blur' }
				      ],          adduser: [
				        { required: true, message: '必填项不能为空', trigger: 'blur' }
				      ],          addtime: [
				        { required: true, message: '必填项不能为空', trigger: 'blur' }
				      ],          updatuser: [
				        { required: true, message: '必填项不能为空', trigger: 'blur' }
				      ],          updatetime: [
				        { required: true, message: '必填项不能为空', trigger: 'blur' }
				      ] */
			})

			const dataFormRef = ref(null)

			const init = () => {
				visible.value = true;
				
				dataForm.value.sortName = ''
				dataForm.value.sortvalue = [];
				dataForm.value.skusort=''
				nextTick(function() {
					//dataFormRef.value.resetFields();
					if (dataForm.value.id) {
						getputawaystrategydetailInfo();
					}
					getZoneListFn();
					locTypeFn();
					locStatusFn();
					locCategoryFn();
					rowcollevorderFn();
					// skusortFn()
					biggerorsmallerFn()
					putawaycodeFn();
					getSkucategoryList()
				})
			}

			const getputawaystrategydetailInfo = () => {
				getPutawaystrategydetailById(dataForm.value.id).then(function(res) {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					dataForm.value = _.assignIn({}, dataForm.value, res.data);
					
					if (dataForm.value.skusort) {
						let dataArray = dataForm.value.skusort.split('#');
						dataForm.value.sortvalue = dataArray.filter(function(item, index) {
							return item.length > 0
						})
					}
				}).catch((err) => {});
			}

			//获取库位类型
			const locTypeList = ref("");
			const locTypeFn = () => {
				getCodeListByCode('loc_type').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					locTypeList.value = res.data;
				}).catch((err) => {});
			}
			//获取库位状态
			const locStatusList = ref("");
			const locStatusFn = () => {
				getCodeListByCode('loc_status').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					locStatusList.value = res.data;
				}).catch((err) => {});
			}
			//获取库位类别
			const locCategoryList = ref("");
			const locCategoryFn = () => {
				getCodeListByCode('loc_category').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					locCategoryList.value = res.data;
				}).catch((err) => {});
			}

			// //获物料分类
			// const skusortList = ref("");
			// const skusortFn = () => {
			// 	getCodeListByCode('SKUSORT').then((res) => {
			// 		if (res.code !== 0) {
			// 			return ElMessage.error(res.msg);
			// 		}
			// 		skusortList.value = res.data;
			// 	}).catch((err) => {});
			// }

			//获排列排顺序
			const rowcollevorderList = ref("");
			const rowcollevorderFn = () => {
				getCodeListByCode('xyzorder').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					rowcollevorderList.value = res.data;
				}).catch((err) => {});
			}

			//获变大或变小
			const biggerorsmallerList = ref("");
			const biggerorsmallerFn = () => {
				getCodeListByCode('biggerorsmaller').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					biggerorsmallerList.value = res.data;
				}).catch((err) => {});
			}

			//获变大或变小
			const putawaycodeList = ref("");
			const putawaycodeFn = () => {
				getCodeListByCode('putawaycode').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					putawaycodeList.value = res.data;
				}).catch((err) => {});
			}


			const zoneList = ref({});
			const getZoneListFn = () => {
				getzonelist().then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					zoneList.value = res.data;
				}).catch((err) => {});
			}

			const skucategoryList = ref([]);
			const getSkucategoryList = () => {
				return getSkucategoryByType(0)
					.then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						let data1 = [];
						createList(res.data, data1);
						skucategoryList.value = data1;
					})
					.catch(function() {});
			}

			const createList = (sourcedata, targetdata) => {
				for (let i = 0; i < sourcedata.length; i++) {
					let tempdata = sourcedata[i];
					if (tempdata.children.length > 0) {
						let children = {
							categorykey: '',
							name: '',
							children: []
						}
						children.categorykey = tempdata.categorykey;
						children.name = tempdata.name;
						createList(tempdata.children, children.children);
						targetdata.push(children)
					} else {
						let children = {
							categorykey: '',
							name: ''
						}
						children.categorykey = tempdata.categorykey;
						children.name = tempdata.name;
						targetdata.push(children)
					}
				}
			}

			const handleChange = (value) => {
				dataForm.value.skusort = "";
				if (!value) {
					return;
				}
				for (let i = 0; i < value.length; i++) {
					dataForm.value.skusort += value[i] + '#';
				}	
			}

			// 表单提交
			const dataFormSubmitHandle = _.debounce(() => {
				dataFormRef.value.validate(function(valid) {
					if (!valid) {
						return false;
					}

					let qing = () => {
						return !dataForm.value.id ? postPutawaystrategydetail(dataForm.value) :
							putPutawaystrategydetail(dataForm.value)
					}
					qing().then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								visible.value = false
								emit('refreshDataList')
							}
						})
					}).catch(function() {});

				})
			}, 1000, {
				'leading': true,
				'trailing': false
			})

			return {
				visible,
				dataForm,
				dataRule,
				init,
				dataFormSubmitHandle,
				dataFormRef,
				locTypeList,
				locStatusList,
				locCategoryList,
				zoneList,
				// skusortList,
				rowcollevorderList,
				biggerorsmallerList,
				putawaycodeList,
				getSkucategoryList,
				skucategoryList,
				handleChange
			}
		},


	}
</script>

<style scoped>

</style>
